<template>
  <div id="container" style="width:100%; height: 100%;">
    <div class="topimage">
      <img src="../assets/toponeimages.png" alt class="oneiimages" />
      <img src="../assets/top.png" alt class="twoiimages" />
      <div class="fourimages">
        <div>
          <img :src="tabid==1?require('../assets/tab1.png'):require('../assets/tab3.png')" alt @click="tab1()" />
          <p class="firsttext" :style="tabid==1?'color:#fff':'color:#228be3'" @click="tab1">空气质量统计</p>
        </div>
        <div>
          <img :src="tabid==2?require('../assets/tab1.png'):require('../assets/tab3.png')" @click="tab2" alt />
          <p class="firsttext" @click="tab2" :style="tabid==2?'color:#fff':'color:#228be3'">达标情况</p>
        </div>
        <div>
          <img :src="tabid==3?require('../assets/tab1.png'):require('../assets/tab3.png')" alt @click="tab3" />
          <p class="firsttext" @click="tab3" :style="tabid==3?'color:#fff':'color:#228be3'">任务调度</p>
        </div>
        <div>
          <img src="../assets/tab4.png" alt @click="tab4" />
          <p class="firsttext" @click="tab4">污染统计</p>
        </div>
      </div>
    </div>
    <!-- 实况预报按钮 -->
    <div class="left_top_btn">
      <span class="firstspan spanlist" :style="active1" @click="firstspan1()">实况</span>
      <span class="spanlist" :style="active2" @click="firstspan2()">预报</span>
    </div>
    <!-- 点击实况展示的 -->
    <div class="firstspanshow" v-show="active1show">国控站，省控站</div>
    <!-- 点击预报展示的 -->
    <div class="lastspanshow" v-show="active2show">
      <p>全</p>
      <p>省</p>
      <p>各</p>
      <p>市</p>
      <p>14</p>
      <p>天</p>
      <p>空</p>
      <p>气</p>
      <p>质</p>
      <p>量</p>
      <p>预</p>
      <p>报</p>
    </div>
    <div class="lastspanshow2" v-show="active2show">
      <!-- <span>周三 19</span>
      <span>周四 20</span>
      <span>周五 21</span>
      <span>周六 22</span>
      <span>周日 23</span>
      <span>周一 24</span>
      <span>周二 25</span>
      <span>周三 26</span> -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <!-- <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div> -->
          <span class="swiper-slide">周三 19</span>
          <span class="swiper-slide">周四 20</span>
          <span class="swiper-slide">周五 21</span>
          <span class="swiper-slide">周三 19</span>
          <span class="swiper-slide">周四 20</span>
          <span class="swiper-slide">周五 21</span>
          <span class="swiper-slide">周三 19</span>
          <span class="swiper-slide">周四 20</span>
          <span class="swiper-slide">周五 21</span>
          <span class="swiper-slide">周三 19</span>
          <span class="swiper-slide">周四 20</span>
          <span class="swiper-slide">周五 21</span>
        </div>
      </div>
    </div>
    <!-- 叠加渲染 -->
    <div class="djxr" @click="djxr">
      <div>
        <p>叠</p>
        <p>加</p>
        <p>渲</p>
        <p>染</p>
      </div>
      <div>
        <p>叠</p>
        <p>加</p>
        <p>风</p>
        <p>场</p>
      </div>
    </div>
    <!-- 下拉框 -->
    <div class="mapselect">
      <el-select v-model="value" placeholder="请选择" @change="selectchange" class="cityOption">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
    <div class="mapselectbtn" @click="checkbox">
      <img src="../assets/selicon.png" alt="">
    </div>
    <!-- 多选框 -->
    <div class="checkbox" v-show="checkboxshow">
      <div>
        <p>空气站</p>
        <el-checkbox v-model="checked1" label="国控站" size="mini"></el-checkbox>
        <el-checkbox v-model="checked2" label="省控站" size="mini"></el-checkbox>
        <el-checkbox v-model="checked3" label="市控站" size="mini"></el-checkbox>
      </div>
      <div>
        <p>污染源</p>
        <el-checkbox v-model="checked4" label="工业源" size="mini"></el-checkbox>
        <el-checkbox v-model="checked5" label="移动源" size="mini"></el-checkbox>
        <el-checkbox v-model="checked6" label="XXX源" size="mini"></el-checkbox>
      </div>
    </div>
    <left-top></left-top>
    <left-center></left-center>
    <left-bottom></left-bottom>
    <center-charts ref="son"></center-charts>
    <right-charts ref="texttab"></right-charts>

    <el-dialog
      title="沈阳嘉禾药业有限公司"
      :visible.sync="dialogVisible"
      width="300px">
      <div class="company-con">
        <div class="info">
          <span>区域：杨凌街道</span>
        </div>
        <div class="info">
          <span>详细地址：滨河路街道</span>
        </div>
        <div class="info">
          <span>类型：废气</span>
        </div>
        <div class="info">
          <span>类型：工业企业</span>
        </div>
        <div class="info">
          <span>排污许可证编号：0000003</span>
        </div>
        <div class="info">
          <span>24小时在线率：90%</span>
        </div>
        <div class="info">
          <span>当前传输：正常</span>
        </div>
        <div class="info">
          <span>监管责任人：张小白</span>
        </div>
        <div class="info">
          <span>电话：18233333333</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import laodAMap from "../../utils/loadAMap";
  import LeftTop from "../components/left_top";
  import LeftCenter from "../components/left_center";
  import LeftBottom from "../components/left_bottom";
  import CenterCharts from "../components/center_charts";
  import RightCharts from "../components/right";
  // Import Swiper Vue.js components
  // Import Swiper styles
  import Swiper from 'swiper';
  import "swiper/swiper.min.css";
  export default {
    name: "Home",
    components: {
      LeftTop,
      LeftCenter,
      LeftBottom,
      CenterCharts,
      RightCharts
      // Swiper,
      // SwiperSlide
    },
    data() {
      return {
        mySwiper: null,
        tabid: 1,
        tab1png: "../assets/tab1.png",
        tab2png: "../assets/tab3.png",
        checkboxshow: false,
        // 点击次数
        clicklist: 0,
        checked1: true,
        checked2: false,
        checked3: false,
        checked4: false,
        checked5: true,
        checked6: false,
        map: null,
        disProvince: null,
        show: true,
        district: null,
        polygons: [],
        active1: "",
        active1show: false,
        active2show: false,
        active2: "",
        capitals: [{
            center: [123.219264, 41.93573]
          },
          {
            center: [124.054225, 41.968412]
          },
          {
            center: [122.746852, 41.468187]
          },
          {
            center: [123.88943, 41.43525]
          }
        ],
        value: "辽宁省",
        options: [{
            lable: "全省",
            value: "辽宁省"
          },
          {
            lable: "铁岭市",
            value: "铁岭市"
          },
          {
            lable: "沈阳市",
            value: "沈阳市"
          },
          {
            lable: "锦州市",
            value: "锦州市"
          },
          {
            lable: "朝阳市",
            value: "朝阳市"
          }
        ],
        dialogVisible: false
      };
    },
    mounted() {
      this.getmap();
    },
    created() {
      this.mySwiper = new Swiper('.swiper-container', {
        loop: true,
        Autoplay: true,
         slidesPerView: "auto",
      });
    },
    methods: {
      checkbox() {
        this.checkboxshow = !this.checkboxshow
      },
      firstspan1() {
        this.active1 = "background:#228be3;color: #fff";
        this.active2 = "";
        this.active1show = true;
        this.active2show = false;
      },
      firstspan2() {
        this.active1 = "";
        this.active2 = "background:#228be3;color:#fff";
        this.active1show = false;
        this.active2show = true;
      },
      tab1() {
        this.tabid = 1;
        // this.$refs.texttab.texttab = {
        //   tab1text: "123",
        //   tab1text: "123"
        // };
        this.$refs.texttab.showid = 1;
      },
      tab2() {
        this.tabid = 2;
        this.$refs.texttab.showid = 2;
      },
      tab3() {
        this.tabid = 3;
        this.$refs.texttab.showid = 3;
      },
      tab4() {
        this.$refs.texttab.showid = 4;
      },
      getmap() {
        let that = this;
        laodAMap().then(
          AMap => {
            that.map = new AMap.Map("container", {
              resizeEnable: true,
              // zoomEnable: false,
              dragEnable: false,
              center: [123.469203, 41.669052],
              zoom: 6.5,
              pitch: 0,
              viewMode: "3D"
            });
            that.map.setDefaultCursor("default");
            var opts = {
              subdistrict: 1, //返回下一级行政区
              showbiz: false //最后一级返回街道信息
            };
            // 添加控件
            AMap.plugin(["AMap.ToolBar"], function () {
              // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
              that.map.addControl(
                new AMap.ToolBar({
                  // 简易缩放模式，默认为 false
                  position: "LT",
                  liteStyle: true
                })
              );
            });
            AMap.event.addListener(that.map, "click", function () {
              //添加点击事件,传入对象名，事件名，回调函数
              that.getmapclick();
            });
            that.districtmap();

            for (var i = 0; i < that.capitals.length; i += 1) {
              var center = that.capitals[i].center;
              var circleMarker = new AMap.CircleMarker({
                center: center,
                radius: 10 + Math.random(), //3D视图下，CircleMarker半径不要超过64px
                strokeColor: "white",
                strokeWeight: 2,
                strokeOpacity: 0,
                fillColor: "rgba(0,0,255,1)",
                fillOpacity: 0.5,
                zIndex: -1,
                bubble: true,
                cursor: "pointer",
                clickable: true
              });
              circleMarker.setMap(that.map);
            }
          },
          e => {
            console.log("地图加载失败", e);
          }
        );
      },
      getmapclick() {
        // this.$refs.son.show = true;
      },
      // 切换城市
      selectchange() {
        this.map.remove(this.district);
        this.districtmap();
      },
      districtmap() {
        var that = this;
        //   圈住地图开始
        if (!this.district) {
          //实例化DistrictSearch
          var opts = {
            subdistrict: 0, //获取边界不需要返回下级行政区
            extensions: "all", //返回行政区边界坐标组等具体信息
            level: "district", //查询行政级别为 市
            zoom: 6.5
          };
          this.district = new AMap.DistrictSearch(opts);
        }
        //行政区查询
        this.district.setLevel("city");
        this.district.search(this.value, function (status, result) {
          that.map.remove(that.polygons); //清除上次结果
          that.polygons = [];
          var bounds = result.districtList[0].boundaries;
          if (bounds) {
            for (var i = 0, l = bounds.length; i < l; i++) {
              //生成行政区划polygon
              var polygon = new AMap.Polygon({
                strokeWeight: 2,
                path: bounds[i],
                fillOpacity: 0.1,
                fillColor: "#80d8ff",
                strokeColor: "#0091ea"
              });
              that.polygons.push(polygon);
              polygon.on("click", e => {
                if (that.checked5) {
                  that.dialogVisible = true
                } else {
                  that.$refs.son.obj = {
                    "z-index": 9999
                  };
                }
              });
            }
          }
          that.map.add(that.polygons);
          that.map.setFitView(that.polygons); //视口自适应
        });
        //   //   圈住地图结束
      },
      // 染色地图开始
      djxr() {
        this.clicklist += 1;
        console.log(this.clicklist);
        if (this.clicklist % 2 == 0) {
          console.log("shanchu");
          this.map.remove(this.disProvince);
        } else {
          this.initPro(210000, 2);
        }
      },
      initPro(code, dep) {
        // var disProvince;
        var that = this;
        dep = typeof dep == "undefined" ? 2 : dep;
        // adCode = code;
        // depth = dep;
        this.disProvince && this.disProvince.setMap(null);
        this.disProvince = new AMap.DistrictLayer.Province({
          zIndex: 12,
          adcode: [code],
          depth: dep,
          styles: {
            fill: function (properties) {
              // properties为可用于做样式映射的字段，包含
              // NAME_CHN:中文名称
              // adcode_pro
              // adcode_cit
              // adcode
              var adcode = properties.adcode;
              return that.getColorByAdcode(adcode);
            },
            "province-stroke": "cornflowerblue",
            "city-stroke": "white", // 中国地级市边界
            "county-stroke": "rgba(255,255,255,0.5)" // 中国区县边界
          }
        });
        that.disProvince.setMap(that.map);
      },
      // 颜色辅助方法251, 255, 9
      getColorByAdcode(adcode) {
        let colorArr = ['rgb(253, 250, 17)', 'rgb(176, 253, 4)', 'rgb(254, 230, 3)']
        var colors = {};
        if (!colors[adcode]) {
          var index = parseInt(Math.random() * 3);
          colors[adcode] = colorArr[index];
        }

        return colors[adcode];
      }
    }
  };

</script>
<style>
  .amap-touch-toolbar .amap-zoomcontrol {
    left: 5rem;
    bottom: -1.9rem;
  }

  #container {
    position: relative;
  }

  .left_top_btn {
    position: absolute;
    left: 5.1125rem;
    top: 0.8875rem;
    z-index: 999;
    background-color: #fff;
  }

  .left_top_btn span:first-child {
    border-radius: .0625rem 0 0 .0625rem;
  }

  .left_top_btn span:last-child {
    border-radius: 0 .0625rem .0625rem 0;
  }

  .left_top_btn span {
    width: 1.125rem;
    height: 0.375rem;
    line-height: 0.375rem;
    display: inline-block;
    text-align: center;
    border: 1px solid #228be3;
  }

  .firstspan {
    border-right-style: none;
  }

  .firstspanshow {
    width: 150px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 30px;
    position: absolute;
    left: 6.5rem;
    top: 100px;
    z-index: 999;
    background-color: #027db4;
  }

  .lastspanshow {
    padding: .0625rem;
    position: absolute;
    z-index: 999;
    left: 5.2rem;
    top: 5.7rem;
    background-color: #fff;
    color: #027db4;
    border-radius: 5px;
  }

  .lastspanshow2 {
    position: absolute;
    /* bottom: 0; */
    top: 90%;
    left: 50%;
    z-index: 999;
    transform: translateX(-50%);
  }

  .lastspanshow2 span {
    width: 50px;
    display: inline-block;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background-color: #7d8878;
    color: #fff;
  }

  .djxr {
    /* width: 73px; */
    z-index: 999;
    padding: .1rem;
    position: absolute;
    left: 5.2rem;
    top: 3.5rem;
    background-color: #fff;
    color: #333;
    border: 1px solid #027db4;
    border-radius: 5px;
  }

  .djxr div:first-child {
    color: #027db4;
    padding-bottom: .0625rem;
    border-bottom: 1px solid #333;
  }

  .djxr div:last-child {
    padding-top: .0625rem;
  }

  .djxr p {
    width: 100%;
    text-align: center;
    font-size: .15rem;
  }

  .mapselectbtn {
    width: .375rem;
    height: .375rem;
    position: absolute;
    left: 6.5rem;
    top: 1.5rem;
    z-index: 999;
    background-color: #fff;
    padding: .1rem;
  }

  .mapselectbtn img {
    width: 100%;
  }

  .mapselect {
    width: 1.1rem;
    height: 0.375rem;
    /* background-color: #fff; */
    position: absolute;
    left: 5.3rem;
    top: 1.5rem;
    z-index: 999;
  }

  .topimage {
    position: absolute;
    top: 0;
    z-index: 999;
    position: relative;
  }

  .twoiimages {
    width: 100%;
  }

  .oneiimages {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .fourimages {
    display: inline;
    position: absolute;
    bottom: 0px;
    right: 0.25rem;
    display: flex;
    width: 6.875rem;
    /* position: relative; */
  }

  .fourimages div {
    display: inline-block;
    position: relative;
    /* flex: 1; */
  }

  .fourimages div img {
    height: 100%;
    width: 100%;
  }

  .firsttext {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.175rem;
    color: #228be3;
  }

  .fourimages div:nth-child(2) {
    margin-left: -0.75rem;
  }

  .fourimages div:nth-child(3) {
    margin-left: -0.75rem;
  }

  .fourimages div:nth-child(4) {
    margin-left: -0.75rem;
  }

  .cityOption {
    width: 100% !important;
    height: 100%;
    top: 0 !important;
    outline: none;
    font-size: 0.175rem;
  }

  /* 复选框 */
  .checkbox {
    width: 1.5rem;
    position: absolute;
    left: 6.55rem;
    top: 1.9rem;
    z-index: 999;
    background-color: #fff;
  }

  .checkbox p {
    font-size: 0.175rem;
    width: 100%;
    text-align: center;
    height: 0.375rem;
    line-height: 0.375rem;
    background-color: #f1f8ff;
  }

  .el-checkbox {
    padding: 0.0625rem;
    color: #333;
  }

</style>
<style>
.el-dialog__body {
  padding: 10px 15px;
}
.info {
  padding: 5px 0;
  font-size: 14px;
  color: #333333;
}
</style>
